<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:body>
        <ui:composition template="./../template/main.xhtml">
            <ui:define name="content">
                 <h1 class="title ui-widget-header ui-corner-all ">Nhập Hàng</h1>
                <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true"/>
                <!-- Insert Form -->
                <h:form id="insertForm">      
                    <h:panelGrid columns="2" styleClass="my-panel-grid">
                        <!-- Date -->
                        <p:outputLabel for="date" value="Ngày:"/>
                        <p:calendar id="date" value="#{receiptNoteController.selectedReceiptNote.date}" disabled="true" 
                                    navigator="true" yearRange="c-100:c-0" maxdate="31/12/2020" 
                                    pattern="dd/MM/yyyy" showOn="button" readonlyInput="true"/>
                        
                        <p:outputLabel for="province" value="Tỉnh/Thành phố:"/>
                        <p:selectOneMenu id="province" value="#{receiptNoteController.selectedProvince.id}">
                            <f:selectItem itemValue="#{null}" itemLabel="Chọn tỉnh/thành phố"/>
                            <f:selectItems value="#{receiptNoteController.provinceList}" var="provinceList" 
                                           itemValue="#{provinceList.id}" itemLabel="#{provinceList.name}"/>
                            <p:ajax update="district, store"/>
                        </p:selectOneMenu>
                        
                        <p:outputLabel for="district" value="Quận/Huyện:"/>
                        <p:selectOneMenu id="district" value="#{receiptNoteController.selectedDistrict.id}">
                            <f:selectItem itemValue="#{null}" itemLabel="Chọn quận/huyện"/>
                            <f:selectItems value="#{receiptNoteController.districtList}" var="districtList" 
                                           itemValue="#{districtList.id}" itemLabel="#{districtList.name}"/>
                            <p:ajax update="store"/>
                        </p:selectOneMenu>
                        
                        <p:outputLabel for="store" value="Cửa hàng:"/>
                        <p:selectOneMenu id="store" value="#{receiptNoteController.selectedStore.id}">
                            <f:selectItem itemValue="#{null}" itemLabel="Chọn cửa hàng"/>
                            <f:selectItems value="#{receiptNoteController.storeList}" var="storeList" 
                                           itemValue="#{storeList.id}" itemLabel="#{storeList.name}"/>
                        </p:selectOneMenu>
                        
                        <p:outputLabel for="phone" value="Sản phẩm:"/>
                        <p:selectOneMenu id="phone" value="#{receiptNoteController.selectedPhone.id}">
                            <f:selectItem itemValue="#{null}" itemLabel="Chọn sản phẩm"/>
                            <f:selectItems value="#{receiptNoteController.phoneList}" var="phoneList" 
                                           itemValue="#{phoneList.id}" itemLabel="#{phoneList.name}"/>
                            <p:ajax update="color"/>
                        </p:selectOneMenu>
                        
                        <p:outputLabel for="color" value="Màu:"/>
                        <p:selectOneMenu id="color" value="#{receiptNoteController.selectedColor.id}">
                            <f:selectItem itemValue="#{null}" itemLabel="Chọn màu"/>
                            <f:selectItems value="#{receiptNoteController.phoneCodeList}" var="phoneCodeList" 
                                           itemValue="#{phoneCodeList.color.id}" itemLabel="#{phoneCodeList.color.name}"/>
                        </p:selectOneMenu>
                        
                        <p:outputLabel for="quantity" value="Số lượng:"/>
                        <p:spinner id="quantity" value="#{receiptNoteController.selectedReceiptNoteDetails.quantity}" min="1"/>
                            
                        <p:outputLabel for="price" value="Giá:"/>
                        <p:spinner id="price" value="#{receiptNoteController.selectedReceiptNoteDetails.price}" min="100000" stepFactor="50000"/>
                        
                        <p:commandButton id="insertButton" update=":insertForm:receiptNoteDetailsForm" action="#{receiptNoteController.createReceiptNoteDetails()}" icon="ui-icon" value="Thêm"/>
                        <p:commandButton id="saveButton" update=":insertForm, :messages" action="#{receiptNoteController.insertReceiptNote()}" icon="ui-icon" value="Lưu"/>
                    </h:panelGrid>
                    
                    <p:dataTable style="text-align: center" id="receiptNoteDetailsForm" var="receiptNoteDetails" value="#{receiptNoteController.tempList}"
                                 emptyMessage="Không có sản phẩm">
                        <!-- Product -->
                        <p:column headerText="Sản phẩm" style="width: 30%">
                            <p:outputLabel value="#{receiptNoteDetails.phone.name}"/>
                        </p:column>
                        <!-- Color -->
                        <p:column headerText="Màu" style="width: 20%">
                            <p:outputLabel value="#{receiptNoteDetails.color.name}"/>
                        </p:column>
                        <!-- Quantity -->
                        <p:column headerText="Số lượng" style="width: 20%">
                            <p:outputLabel value="#{receiptNoteDetails.quantity}"/>
                        </p:column>
                        <!-- Price -->
                        <p:column headerText="Giá" style="width: 20%">
                            <p:outputLabel value="#{receiptNoteDetails.price}">
                                <f:convertNumber type="number"/>
                            </p:outputLabel>
                        </p:column>
                        <p:column style="width: 10%">
                            <p:commandButton id="deleteButton" update=":insertForm:receiptNoteDetailsForm" action="#{receiptNoteController.deleteReceiptNoteDetails(receiptNoteDetails.phone.id, receiptNoteDetails.color.id)}" process="@this" icon="ui-icon-close"/>
                        </p:column>
                    </p:dataTable>
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>